<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3</title>
</head>
<body>
    <script>
        let obj = {
            info: {
                name: '大伟聊前端',
                blogs: ['Webpack', 'Vue', 'React']
            }
        }
        let handler = {
        get (target, key, receiver) {
            console.log('get', key)
            // 递归创建并返回
            if (typeof target[key] === 'object' && target[key] !== null) {
            return new Proxy(target[key], handler)
            }
            return Reflect.get(target, key, receiver)
        },
        set (target, key, value, receiver) {
            console.log('set', key, value)
            return Reflect.set(target, key, value, receiver)
        }
        }
        let proxy = new Proxy(obj, handler)
        // 以下两句都能够进入 set
        // proxy.info.name = '大伟聊前端2'
        proxy.info.blogs.push('')
    </script>
</body>
</html>